import React, {
    Component
} from "react";
import {
    Modal,
    Tooltip,
    Form,
    Table,
    Row,
    Col,
    Spin,
    Divider,
    DatePicker,
    message,
    Button
} from 'antd';
import {
    findVoucherUseDetail
} from "../../fetch/fetchApi";
import classNames from 'classnames';

class VoucherUseDetail extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            gridData: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10'
        };
        this.tableColumns = [{
            title: '订单号',
            dataIndex: 'orderId',

            key: 'orderId'
        }, {
            title: '金额',
            dataIndex: 'amount',
            key: 'amount',
            className: 'column-nowrap'
        }, {
            title: '使用时间',
            dataIndex: 'createTime',
            key: 'createTime',
        }, {
            title: '使用账户',
            dataIndex: 'createAccount',
            key: 'createAccount',
        }];
    }

    findVoucherUseDetail = (params = {}) => {
        this.setState({
            loading: true
        })
        findVoucherUseDetail(this.query).then((res) => {
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = parseInt(this.query.page);
            this.setState({
                loading: false,
                gridData: res.data.data,
                pagination,
            });
        });
    }

    componentDidMount() {
        this.query["id"] = this.props.id;
        this.findVoucherUseDetail();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.id !== this.props.id) {
            this.query["page"] = 1;
            this.query["id"] = nextProps.id;
            this.findVoucherUseDetail();
        }
    }

    handleTableChange = (pagination, filters, sorter) => {
        console.log(pagination);
        this.query.page = pagination.current;
        this.findVoucherUseDetail();
    }

    render() {
        const className = classNames({
            'sc-table': true,
            'table-center': 'table-center'
        });
        return (
            <div className="sc-page-content">
                <div className="page-toolbar">
                </div>

                <div className="page-panel">
                    <Table className={className} onChange={this.handleTableChange} dataSource={this.state.gridData} loading={this.state.loading} columns={this.tableColumns} pagination={this.state.pagination}/>
                </div>
            </div>
        )
    }
}
export default VoucherUseDetail;